{extend name="./public/base" /}
{block name="title"}个人资料{/block}
{block name="style"}
<style type="text/css">
	.content{
		width: 100%;
		background-color:#fff;
		font-size: 32px;
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 80px;
	    color: #fff;
	    text-align: center;
	    line-height: 80px;
	    font-size: 32px;
	}
	.back{
		float: left;
	    margin-top: 14px;
	    padding-left: 10px;
	}
	
	.line{
		height: 2px;
	    background-color: #edecec;
	    margin: 40px auto;
	    width: 90%;
	}
	.line1{
		height: 2px;
	    background-color: #edecec;
	    margin: 40px auto;
	    width: 90%;
	    margin-top: -20px;
	}
	
	.content1{
		width: 90%;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    position: relative;
	}
	.active{
		background-color: #ffba58;
		color: white;
	}
	.img{
		width: 100%;
		height:400px;
	}

	.img img{
		width: 100%;
		height:100%;
	}
	.content_list{
		padding: 10px;
	}
	.content_list span{
		display: inline-block;
		padding: 0 30px;
		border-radius: 20px;
		border: 1px solid #ffba58;
		margin-left: 30px;
		margin-top:18px;
		box-shadow: 0px 5px 2px #d0cf88;
	}
	.button{
		height:80px;
		background-color: #ffba58;
		color:#fff;
		text-align: center;
		line-height: 80px;
		width:90%;
		margin:20px auto;
		border-radius: 40px;
	    font-size: 32px;
   	}
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>{{text11}}</span>
		</div>
		<div class="content1">
			<div class="img"><img src="__STATIC__/images/banner1.png" alt=""></div>
			<div class="line"></div>
			<div class="content_list">
				<span class="list" v-bind:class="select_data.indexOf(tag.value) >=0? 'active':''"  v-for="tag in tags" :data_id="tag.value" @click="select(tag.value)">{{tag.title}}</span>
			</div>
		</div>
		<div class="button" @click="save_tags">保存资料</div>
	</div>
	
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    tags: [],
			    text11:'标签',
			    select_data:[],
			},
		    methods:{
		        getTagList:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'Cate/param',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {table:'tags'},
		        		success:function(data){
		        			if(data.code == 1){
		        				t.tags = data.data.data1;
		        			}
		        			console.log(t.tags);
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        getMyList:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'Cate/my_tag',
		        		type: 'post',
		        		dataType: 'json',
		        		success:function(data){
		        			console.log(1234343);
		        			console.log(data);
		        			if(data.code == 1){
		        			    t.select_data = data.data.tags_ids;
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        select:function(e){
		        	var that = this;
		        	console.log(e);
		        	
		        	var index = $.inArray(e,that.select_data);
		        	if(index>=0){
		        		that.select_data.splice(index,1);
		        	}else{
		        		if(that.select_data.length > 5){
			        		$.toast("选择标签数量最多6个","text");
			        		return;
		        	    }
		        		that.select_data.push(e);
		        	}
		        },
		        save_tags:function(e){
		        	var t = this;
		        	var select_data = t.select_data;
		        	if(select_data == ''){
						$.toast("请选择标签","text");
					}
		        	var select_data_str = select_data.join(',');
		        	$.ajax({
		        		url: host+'Cate/save_tags',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {'tags':select_data_str},
		        		success:function(data){
		        			$.toast(data.msg,"text");
		        			if(data.code == 1){
		        				setTimeout(function(){
                                  window.location.href = "{:url('info')}";
                              	}, 3000);
		        			}
		        			console.log(data);
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        }
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.getTagList();
	            this.getMyList();
	            this.select();
	            //console.log();
	        }

		})
		

		
	});
</script>
{/block}